<template>
  <div class="mContainer">
    <div class="header-container">
      <span class="header-left-span">路线详情</span>
    </div>

    <div class="line-top-container">
      <div class="line-top-bus-container">
        <img src="../../assets/image/bus-icon.png"/>
        <span>{{lineDetailsData.lineName}}</span>
      </div>

      <div class="smp" style="height: 1.066rem;" v-show="isSm">
        <img class="s" src="../../assets/image/x-s-icon.png" alt=""><span>{{lineDetailsData.firstOrder}}</span>
        <span style="height: 100%;width: 0.26rem;"></span>
        <img class="m"  src="../../assets/image/x-m-icon.png" alt="">
        <span>{{lineDetailsData.lastOrder}}</span>
        <span style="height: 100%;width: 0.26rem;"></span>
        <span v-show="isTicket">票价:{{lineDetailsData.ticket}}元</span>
      </div>

      <div class="line-top-bus-detail">
        <div class="line-top-bus-detail-left">
          <span>方向： {{lineDetailsData.endDirection}}</span>
          <span style="width: 100%; height: 0.26rem;"></span>
          <span>已获得 {{lineDetailsData.carNo}} 辆公交车的实时位置</span>
        </div>

        <div class="line-top-bus-detail-right"
             v-on:click="queryReverse(lineDetailsData.startDirection,lineDetailsData.endDirection,lineDetailsData.updown)">
          <img src="../../assets/image/toggle-selected-icon.png"/>
          <span>查询反向</span>
        </div>

      </div>
    </div>

    <!--statue  1起点   2终点  3普通站点  4车到站了  5 车在两站中间  -->
    <div class="line-list">
      <div class="line-list-divider"></div>
      <div class="line-list-container" v-for="(item,index) in lineDetailsData.siteList">

        <!-- 车辆图标 -->
        <div v-if="item.statue.indexOf(3)!=-1" class="line-list-bus-current-img"></div> <!-- 普通站点用空div替代车图标 -->
        <div class="line-list-bus-current-img-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===1"><img class="line-list-bus-current-img1" src="../../assets/image/bus-icon.png"/></div><!--到站-->
        <div class="line-list-bus-current-img-d-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===2"><img class="line-list-bus-current-img-d" src="../../assets/image/2.png"/></div><!--到站-->
        <div class="line-list-bus-current-img-d-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===3"><img class="line-list-bus-current-img-d" src="../../assets/image/3.png"/></div><!--到站-->
        <div class="line-list-bus-current-img-d-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===4"><img class="line-list-bus-current-img-d" src="../../assets/image/4.png"/></div><!--到站-->
        <div class="line-list-bus-current-img-d-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===5"><img class="line-list-bus-current-img-d" src="../../assets/image/5.png"/></div><!--到站-->
        <div class="line-list-bus-current-img-d-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===6"><img class="line-list-bus-current-img-d" src="../../assets/image/6.png"/></div><!--到站-->
        <div class="line-list-bus-current-img-d-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===7"><img class="line-list-bus-current-img-d" src="../../assets/image/7.png"/></div><!--到站-->
        <div class="line-list-bus-current-img-d-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===8"><img class="line-list-bus-current-img-d" src="../../assets/image/8.png"/></div><!--到站-->
        <div class="line-list-bus-current-img-d-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===9"><img class="line-list-bus-current-img-d" src="../../assets/image/9.png"/></div><!--到站-->
        <div class="line-list-bus-current-img-d-div" v-if="item.statue.indexOf(4)!=-1 && index != 0 && getCount(item.statue,4)===10"><img class="line-list-bus-current-img-d" src="../../assets/image/10.png"/></div><!--到站-->


        <!-- 未到站 -->
        <div v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)==-1 && item.statue.indexOf(5)!=-1 && index != 0" class="line-list-bus-current-img" ></div><!-- 未到站使用空div代替 -->
        <div class="line-list-bus-center-img-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===1"><img  class="line-list-bus-center-img" src="../../assets/image/bus-icon.png"/></div>
        <div class="line-list-bus-center-img-d-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===2"><img  class="line-list-bus-center-img-d" src="../../assets/image/2.png"/></div>
        <div class="line-list-bus-center-img-d-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===3"><img  class="line-list-bus-center-img-d"  src="../../assets/image/3.png"/></div>
        <div class="line-list-bus-center-img-d-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===4"><img  class="line-list-bus-center-img-d"  src="../../assets/image/4.png"/></div>
        <div class="line-list-bus-center-img-d-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===5"><img  class="line-list-bus-center-img-d" src="../../assets/image/5.png"/></div>
        <div class="line-list-bus-center-img-d-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===6"><img  class="line-list-bus-center-img-d" src="../../assets/image/6.png"/></div>
        <div class="line-list-bus-center-img-d-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===7"><img  class="line-list-bus-center-img-d" src="../../assets/image/7.png"/></div>
        <div class="line-list-bus-center-img-d-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===8"><img  class="line-list-bus-center-img-d" src="../../assets/image/8.png"/></div>
        <div class="line-list-bus-center-img-d-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===9"><img  class="line-list-bus-center-img-d" src="../../assets/image/9.png"/></div>
        <div class="line-list-bus-center-img-d-div" v-if="item.statue.indexOf(5)!=-1 && index != 0 && getCount(item.statue,5)===10"><img  class="line-list-bus-center-img-d" src="../../assets/image/10.png"/></div>


        <div v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)==-1 && item.statue.indexOf(5)!=-1 && index == 0" class="line-list-bus-current-img" ></div><!--未出站，用空div代替-->

        <!-- 第一站，包含到站和未到站 -->
        <div class="line-list-bus-center-img-index0-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===1">
           <img  class="line-list-bus-center-img-index0" src="../../assets/image/bus-icon.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===2">
           <img  class="line-list-bus-center-img-index0-d" src="../../assets/image/2.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===3" >
          <img vclass="line-list-bus-center-img-index0-d" src="../../assets/image/3.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===4">
          <img  class="line-list-bus-center-img-index0-d" src="../../assets/image/4.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===5">
          <img  class="line-list-bus-center-img-index0-d" src="../../assets/image/5.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===6">
            <img  class="line-list-bus-center-img-index0-d" src="../../assets/image/6.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===7">
          <img  class="line-list-bus-center-img-index0-d" src="../../assets/image/7.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===8">
          <img  class="line-list-bus-center-img-index0-d" src="../../assets/image/8.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===9">
          <img  class="line-list-bus-center-img-index0-d" src="../../assets/image/9.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)!=-1 && index == 0 && getCountByTwo(item.statue,4,5)===10">
          <img  class="line-list-bus-center-img-index0-d" src="../../assets/image/10.png"/>
        </div>

        <!-- 第一站，只包含到站 -->
        <div class="line-list-bus-center-img-index0-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===1">
          <img class="line-list-bus-center-img-index0" src="../../assets/image/bus-icon.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===2">
          <img class="line-list-bus-center-img-index0-d" src="../../assets/image/2.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===3">
          <img class="line-list-bus-center-img-index0-d" src="../../assets/image/3.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===4">
          <img class="line-list-bus-center-img-index0-d" src="../../assets/image/4.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===5">
          <img class="line-list-bus-center-img-index0-d" src="../../assets/image/5.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===6">
          <img class="line-list-bus-center-img-index0-d" src="../../assets/image/6.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===7">
          <img class="line-list-bus-center-img-index0-d" src="../../assets/image/7.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===8">
          <img class="line-list-bus-center-img-index0-d" src="../../assets/image/8.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===9">
          <img class="line-list-bus-center-img-index0-d" src="../../assets/image/9.png"/>
        </div>
        <div class="line-list-bus-center-img-index0-d-div" v-if="item.statue.indexOf(3)==-1 && item.statue.indexOf(4)!=-1 && item.statue.indexOf(5)==-1 && index == 0 && getCount(item.statue,4)===10">
          <img class="line-list-bus-center-img-index0-d" src="../../assets/image/10.png"/>
        </div>
        <!--<div class="line-list-bus-none"></div>-->

        <!-- 站点图标 -->
        <div class="line-list-img-container" v-on:click="selectedFun(index,true)">
          <span ></span>
          <img  v-if="index==0" class="line-list-start-img" src="../../assets/image/line-detail-start.png">
          <img  v-else-if="index==lineDetailsData.siteList.length-1" class="line-list-end-img" src="../../assets/image/line-detail-end.png">
          <img  v-show="index != siteIndex || !isSelected" v-else-if="item.statue.indexOf(4)!=-1" class="line-list-center-img" src="../../assets/image/line-detail-middle.png">
          <img  v-show="index != siteIndex || !isSelected" v-else-if="item.statue.indexOf(3)!=-1||item.statue.indexOf(5)!=-1" class="line-list-middle-img" src="../../assets/image/line-detail-middle.png">
          <img  v-show="index == siteIndex && isSelected" class="line-list-center-img" src="../../assets/image/line-detail-current.png"/>
          <!--<img  v-else="" class="line-list-middle-img" src="../../assets/image/line-detail-middle.png">-->
          <span ></span>
        </div>

        <!-- 站点名称 -->
        <div class="line-list-name-container">
          <div class="line-list-site" v-on:click="selectedFun(index,true)">
            <span>{{item.siteName}} </span>
            <span class="line-list-site-near" v-if="item.isNear" >(离我最近)</span>
          </div>
          <!--<div class="line-list-site-near"></div>-->
        </div>


        <!--<div v-else-if="item.statue.indexOf(3)!=-1" class="line-list-bus-none"></div>-->

      </div>
      <div class="line-list-divider"></div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      lineDetailsData: {},
      isSelected: false,
      siteIndex: -1,
      searchParam: {},
      intervalID: -1,
      isTicket: false,
      isSm: false
    };
  },

  methods: {
    getCount: function (arr, num) {
      var index = 0;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] === num) {
          index++;
        }
      }
      return index;
    },
    getCountByTwo: function (arr, num1, num2) {
      var index = 0;
      for (var i = 0; i < arr.length; i++) {
        if (arr[i] === num1) {
          index++;
        }
        if (arr[i] === num2) {
          index++;
        }
      }
      return index;
    },
    /*
    查询反向
    */
    queryReverse: function (startDirection, endDirection, updown) {
      var data = this.$storage.getStorage('lineDetails');
      data.longitude = this.$storage.getStorage('userData').longitude;
      var userData = this.$storage.getStorage('userData');
      data.longitude = null;
      data.latitude = null;
      if (userData != null) {
        data.longitude = userData.longitude;
        data.latitude = userData.latitude;
      }
      /*
      上行就是从begin 到 end   1 是上行    下行就是从end 到begin    0 是下行
       */
      if (data.direction.startsWith(startDirection)) {
        data.direction = endDirection;
      } else {
        data.direction = startDirection;
      }
      if (!data.direction.endsWith('方向')) {
        data.direction = data.direction + '方向';
      }
      if (data.updown === 1) {
        data.updown = 0;
      } else {
        data.updown = 1;
      }
      this.$storage.setStorage('lineDetails', data);
      this.$utils.indicatorOpen();
      this.searchParam = data;
      this.searchParam.isTnterval = false;
      this.getLineInfo(this.searchParam);
    },
    /*
    获取线路站点
    */
    getLineInfo: function (param) {
      let _this = this;
      this.$baseService.getData(_this.$global.API_GET_ROUTE_INFO, param, function (response) {
        _this.lineDetailsData = response;
        for (var i = 0; i < _this.lineDetailsData.siteList[0].statue.length; i++) {
          if (_this.lineDetailsData.siteList[0].statue[i] === 4) {
            _this.lineDetailsData.siteList[1].statue.push(5);
          }
        }
        _this.lineDetailsData.siteList[0].statue = []; // 第一个站点
        _this.lineDetailsData.siteList[0].statue.push(3);
        if (_this.lineDetailsData.ticket) { // 票价
          _this.isTicket = true;
        }
        if(_this.lineDetailsData.firstOrder) { // 首末班时间
          _this.isSm = true;
        }
      });
    },
    task: function () {
      var _this = this;
      this.intervalID = setInterval(() => {
        let param = _this.searchParam;
        param.isTnterval = true;
        _this.getLineInfo(param);
      }, 10000);
      this.$storage.setStorage('intervalID', this.intervalID);
    },
    /*
    点击站点设立标记
     */
    selectedFun: function (index, flag) {
      if (index !== this.lineDetailsData.siteList.length - 1 && index !== 0) {
        this.isSelected = flag;
        this.siteIndex = index;
      }
    }
  },
  created () {
    if (this.$storage.getStorage('lineDetails')) {
      var data = this.$storage.getStorage('lineDetails');
      var userData = this.$storage.getStorage('userData');
      data.longitude = null;
      data.latitude = null;
      if (userData != null) {
        data.longitude = userData.longitude;
        data.latitude = userData.latitude;
      }
      this.$utils.indicatorOpen();
      this.searchParam = data;
      this.searchParam.isTnterval = false;
      this.getLineInfo(this.searchParam);
    }
    // 执行轮询
    this.task();
  },
  beforeDestroy () {
    clearInterval(this.intervalID);
  }
};
</script>

<style scoped>

  .smp{
    padding: 0px;
    display: flex;
  }
  .s{
    margin-left: 0.4rem;
    height: 0.4rem;
    width: 0.4rem;
    align-self: center;
  }

  .m {
    margin-left: 0.1rem;
    height: 0.39rem;
    width: 0.39rem;
    align-self: center;
  }

  .smp span {
    font-size: 0.37rem;
    margin-left: 0.05rem;
    align-self: center;
    margin-top: 0.13rem;
  }

  .mContainer{
    display: flex;
    flex-direction: column;
    margin: 0px;
    padding: 0px;
  }

  .line-top-container{
    background-color: white;
  }

  .line-top-bus-container{
    border-bottom: 1px solid #f7f7f7;
    height: 1.44rem;
    display: flex;
    margin-left: 0.4rem;
    /*margin-bottom: 0.13rem;*/
  }

  .line-top-bus-container span{
    font-size: 0.42rem;
    color: #333333;
    align-self: center;
    margin-left: 0.26rem;
  }

  .line-top-bus-container img{
    width: 0.58rem;
    height: 0.58rem;
    align-self: center;
  }

  .line-top-bus-detail{
    flex-direction: row;
    display: flex;
    padding-bottom: 0.4rem;
  }

  .line-top-bus-detail-left{
    display: flex;
    flex-direction: column;
  }

  .line-top-bus-detail-left span{
    margin-left: 0.4rem;
    font-size: 0.37rem;
    color: #999999;
  }

  .line-top-bus-detail-right{
    position: absolute;
    right: 0.4rem;
    display: flex;
    /*margin-top: 0.26rem;*/
    flex-direction: column;
  }

  .line-top-bus-detail-right img{
    width: 0.8rem;
    height: 0.8rem;
    align-self: center;
  }

  .line-top-bus-detail-right span{
    color: #333333;
    font-size: 0.32rem;
    margin-top: 0.05rem;
  }

  .line-list{
    background-color: white;
    margin-top: 0.26rem;
    margin-left: 0px;
  }

  .line-list-divider{
    width: 0.02rem;
    height: 0.33rem;
    background-color: #f7f7f7;
    margin-left: 1.33rem;
  }

  .line-list-container{
    display: flex;
    flex-direction: row;
  }

  .line-car-container{
    /*position: absolute;*/
    display: flex;
  }

  .line-list-bus-current-img-div{
    width: 0.46rem;
    height: 0.46rem;
    margin-left: 0.44rem;
    align-self: center;

  }
  .line-list-bus-current-img1{
    width: 0.42rem;
    height: 0.42rem;
    display:block;
  }

  .line-list-bus-current-img{
    width: 0.46rem;
    height: 0.46rem;
    margin-left: 0.44rem;
    align-self: center;
  }

  .line-list-bus-current-img-d-div{
    width: 0.46rem;
    height: 0.46rem;
    margin-left: 0.44rem;
    align-self: center;
  }

  .line-list-bus-current-img-d{
    width: 0.5rem;
    height: 0.46rem;
    display: block;
  }


  .line-list-bus-center-img-index0-div{
    width: 0.46rem;
    height: 0.46rem;
    margin-left: 0.44rem;
    align-self: flex-end;
    margin-bottom: -0.2rem;
    /*margin-top: 0.23rem;*/
  }

  .line-list-bus-center-img-index0{
    width: 0.42rem;
    height: 0.42rem;
    display: block;
  }

  .line-list-bus-center-img-index0-d-div{
    width: 0.46rem;
    height: 0.46rem;
    margin-left: 0.44rem;
    align-self: flex-end;
    margin-bottom: 0rem;
    /*margin-bottom: -0.23rem;*/
  }

  .line-list-bus-center-img-index0-d{
    width: 0.5rem;
    height: 0.46rem;
    display: block;
  }

  .line-list-bus-center-img-div {
    width: 0.46rem;
    height: 0.46rem;
    margin-left: -0.46rem;
    margin-top: -0.23rem;
  }

  .line-list-bus-center-img{
    width: 0.42rem;
    height: 0.42rem;
    display: block;
  }

  .line-list-bus-center-img-d-div{
    width: 0.46rem;
    height: 0.46rem;
    margin-left: -0.46rem;
    /*align-self: flex-end;*/
    margin-top: -0.23rem;
  }

  .line-list-bus-center-img-d{
    width: 0.5rem;
    height: 0.46rem;
    display: block;
  }

  /*.line-list-bus-none{*/
  /*width: 0.42rem;*/
  /*height: 0.42rem;*/
  /*margin-left: 0.4rem;*/
  /*align-self: flex-end;*/
  /*}*/

  .line-list-img-container{
    display: flex;
    flex-direction: column;
    margin-left: 0.26rem;
  }

  .line-list-start-img{
    width: 0.41rem;
    height: 0.41rem;
    margin-right: 0.4rem;
  }

  .line-list-center-img{
    width: 0.36rem;
    height: 0.36rem;
    margin-right: 0.45rem;
  }

  .line-list-middle-img{
    width: 0.36rem;
    height: 0.36rem;
    margin-right: 0.45rem;
  }

  .line-list-end-img{
    width: 0.41rem;
    height: 0.41rem;
    margin-right: 0.4rem;
  }

  .line-list-img-container span{
    width: 0.02rem;
    flex: 1;
    background-color: #f7f7f7;
    margin-left: 0.17rem;
  }

  .line-list-name-container{
    align-self: center;
    padding-top: 0.33rem;
    padding-bottom: 0.33rem;
  }

  .line-list-site{
    font-size: 0.4rem;
    color: #333333;
    padding-top: 0.05rem;
    text-align: center;
  }


  .line-list-site-near{
    margin-left: 0.13rem;
    font-size: 0.4rem;
    color: #fe952c;
  }

</style>
